<template>
	<view>
		<view class="reply-nav">
			<view class="repley-nav-left">
				<text>评论区(15)</text>
			</view>
			<view class="repley-nav-right"><text :class="currentTagLeft" @tap="chooseNew(0)" >最新</text><text style="margin-left: 10rpx;margin-right: 10rpx;">|</text><text :class="currentTagRight" @tap="chooseNew(1)" >热门</text></view>
		</view>
		<view class="comments">
			<view class="comments-items" v-for="(item, index) in commentContents" :key="index">
				<image :src="item.logo" class="comments-face"></image>
				<view class="comments-body">
					<view class="comments-header">{{item.name}}</view>
					<view class="comments-content">
						{{item.content}}
					</view>

					<view class="comments-info">
						<text class="grey" style="font-size: 24rpx;">昨天 19:30</text>
						<text class="grey" style="font-size: 24rpx;margin-left: 20rpx;">{{item.position}}</text>
						<text class="comments-replay-btn" @click="replay()">回复</text>
						<i class="zi zi_digg zi-icon-right zi-icon-click" v-if="item.clickType"></i>
						<i class="zi zi_digg zi-icon-right " v-else></i>
					</view>

					<view class="comments-reply">
						<view class="reply">
							<view class="comments-items " v-for="(item2, index2) in item.reply" :key="index2">
								<image :src="item2.logo" class="comments-face"></image>
								<view class="comments-body">
									<view class="comments-header">
										{{item2.name}}
									</view>
									<view class="comments-content">
										<text class="comments-reply-name" v-if="item2.reply_name">
											<text style="font-weight: bold;">@{{item2.reply_name}}</text>
										</text>
										<text>{{item2.content}}</text>
									</view>
									<view class="comments-info">
										<text class="grey" style="font-size: 24rpx;">昨天 12:30</text>
										<text class="grey"
											style="font-size: 24rpx;margin-left: 20rpx;">{{item2.position}}</text>
										<text class="comments-replay-btn" @click="replay(item2.name)">回复</text>
										<i class="zi zi_digg zi-icon-right zi-icon-click" v-if="item2.clickType"></i>
										<i class="zi zi_digg zi-icon-right " v-else></i>
									</view>
								</view>
							</view>
						</view>

						<view class="comments-more" @click="showMore()" v-if="loadingState=='loadmore'">
							<text style="margin-right: 10rpx;font-size:36rpx;">—</text>
							<text>展开{{item.totalCount}}条回复</text>
							<svg t="1600674701420" class="icon comments-more-icon"
								:class="{'comments-more-icon-rotate':loadingState=='nomore'}" viewBox="0 0 1024 1024"
								version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3631" width="14" height="14">
								<path
									d="M113.27683429 155.94627634l799.4199333 0c44.24124361 0 80.02419363 35.50497793 80.02419365 79.74225054 0 20.57390573-7.89043628 39.17023849-20.57390572 53.25945242l-395.33984827 527.4996929c-26.49074017 34.93712067-76.36290417 42.2676418-111.58990998 15.78087266-6.20274865-4.5110899-11.55172587-9.86403813-15.78087266-15.78087266L49.59342845 283.31308797c-26.20482607-34.9410917-19.15624802-85.09519879 16.0628158-111.30399583C80.03137236 161.01728144 96.65410329 155.94627634 113.27683429 155.94627634L113.27683429 155.94627634z"
									p-id="3632" fill="#B7B7B7"></path>
							</svg>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="comment_input">

		</view>
	</view>
</template>

<script>
	// import graceComment from '../../graceUI/components/graceComment.vue';

	export default {
		props: {
			commentContents: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				loadingState: 'loadmore', //加载前值为loadmore，没有数据为nomore
				currentTagLeft: '',
				currentTagRight: ''
			};
		},
		created() {
			this.chooseNew(0)
		},
		methods: {
			replay(replayName) {
				console.log(replayName);
			},
			showMore() {
				console.log('加载更多')
			},
			chooseNew(num) {
				if (num === 0) {
					this.currentTagLeft = 'text-weight'
					this.currentTagRight = ''
				} else {
					this.currentTagLeft = ''
					this.currentTagRight = 'text-weight'
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.grey {
		color: #999999;
	}

	.common_flex {
		display: flex;
		// font-weight: ;
	}

	.reply-nav {
		padding: 10rpx 15rpx 10rpx 10rpx;
		font-size: 36rpx;
		line-height: 60rpx;
		font-weight: bold;
		background: #fff;
		display: flex;
		position: relative;
		align-items: center;
		min-height: 50px;
		justify-content: space-between;
	}

	.repley-nav-left {
		display: flex;
		position: relative;
		align-items: center;
		justify-content: space-between;
	}

	.repley-nav-right {
		display: flex;
		position: relative;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
	}

	.comments {
		.comments-items {
			display: flex;
			margin-bottom: 32rpx;

			.comments-face {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.comments-body {
				width: calc(100% - 100rpx);
				padding-left: 16rpx;

				.comments-header {
					margin-top: 8rpx;
					margin-bottom: 8rpx;
					color: #8D8C91;
					font-size: 25rpx;
					font-weight: bold;
				}

				.comments-content {
					font-size: 20rpx;
					line-height: 30rpx;

					.comments-reply-name {
						margin-right: 20rpx;
					}
				}

				.comments-info {
					margin-top: 8rpx;

					.comments-replay-btn {
						color: #8E8D95;
						margin-left: 32rpx;
						font-weight: bold;
						letter-spacing: 2rpx;
						font-size: 20rpx;
					}

					.zi-icon-right {
						margin-left: 50rpx;
						font-size: 28rpx;
					}

					.zi-icon-click {
						color: red;
					}
				}

				.comments-reply {
					margin-top: 16rpx;
				}

				.comments-more {
					margin-top: 8rpx;
					color: #999999;
					word-spacing: 10rpx;
					display: flex;
					align-items: center;

					.comments-more-icon {
						margin-left: 8rpx;
					}

					.comments-more-icon-rotate {
						transform: rotate(180deg);
					}
				}
			}

		}
	}

	.reply {
		.comments-items {
			margin-bottom: 8rpx;

			.comments-face {
				width: 70rpx;
				height: 70rpx;
			}

			.comments-body {
				.comments-header {
					font-size: 20rpx;
					display: flex;
					align-items: center;

					.reply-more-icon-rotate {
						transform: rotate(270deg);
						width: 24rpx;
						height: 24rpx;
						margin: 0 6rpx;
					}
				}

				.comments-content {
					font-size: 20rpx;

					.comments-reply-name {
						margin-right: 20rpx;
					}

				}

				.comments-info {
					margin-top: 8rpx;

					.comments-replay-btn {
						font-size: 20rpx;
					}
				}


			}

		}
	}
</style>
